<template>
 <div class="main-container" v-loading="loading" v-cloak>
     <div class="top" ref="top" :class="showcenter? '':'opacity-0'">
        <div class="logo">{{ logo }}</div>
        <div class="menu">
            <ul>
                <li v-for="(item,index) in menuList" :key="index" :class="cur==index? 'active':''">
                    <a href="#" @click="tab(index)">{{item.name}}</a>
                </li>
                
            </ul>
        </div>
     </div>
     
     <div class="center-wrap" :style="{height:conHeight+'px'}"  :class="showcenter? '':'opacity-0'">
        <projectCenter v-if="isProCenter"/>
        <userCenter v-else/>
     </div>

 </div>
</template>



<script>
 export default {
   data () {
     return {
        loading:null,
        showcenter:true,
        logo: process.env.VUE_APP_LOGO,
        bdTokenUrl: '',
        isProCenter:false,
        dialogVisible:false,
        modalContent:'',
        menuList:[
            {
                id:0,
                name:'项目展示'
            },
            {
                id:1,
                name:'个人中心'
            },
            {
                id:2,
                name:'退出'
            },
        ],
        cur:0,
        conHeight:0,
        fullHeight:0,
        curcur:0
     }
   },
   created(){
       this.loading = true;
       this.showcenter = false;
   },
   mounted(){
       var self = this;
        this.cur = 0;
        this.isProCenter = true;
        this.handleResize();
        window.addEventListener('resize', self.handleResize);
        this.$once('hook:beforeDestroy', () => {
            window.removeEventListener('resize', self.handleResize);
        });
        setTimeout(function(){
            self.loading = false;
            self.showcenter= true;
        },500)
   },
   methods:{
        //计算窗口高度
        handleResize(){
            this.$setFontSize();
            let topH = this.$refs.top.offsetHeight;
            this.conHeight = this.$setHeight().screenHeight - topH;
        },
        /**
         * 获取-外部接口信息
        */
        getUrl() {
            let that = this
            let bdUrl = {queryurl: this.$paths.bdpath+'/locate'};
            this.$api.getBdToken(bdUrl,function(res) {
                that.bdTokenUrl = res.data.data;
            })
        }, 
        tab(index) {
            let that = this;
            that.curcur = that.cur;
            that.cur = index;
            if(index==0){
                 that.isProCenter = true;
            }else if(index==1){
                 that.isProCenter = false;
            }else if(index==2){
                that.open();
                
            }
            //  that.open();
           
        },
        open(){
            this.$confirm('确定退出？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning',
                closeOnHashChange:false
            }).then(async()=>{
                this.$router.push({
                     path:'/login'
                 })
            }).catch(()=>{
                this.$message({
                    type:'warning',
                    message:'已取消'
                });
                this.cur = this.curcur;
            })

        }                             
   }
 }
</script>

<style scoped lang="scss">

.main-container{
    background:#f2f7fb;
    .center-wrap{
        overflow: auto;
    }
    .top{
        width:100%;
        background:#01bd8f;
        height:60px;
        line-height:60px;
        color:#fff;
        .logo{
            font-size:22px;
            padding-left:30px;
            float:left;
        }
        .menu{
            float:right;
            font-size:14px;
            padding-right:30px;
            ul{
                overflow: hidden;
            }
            li{
                float:left;
                &.active{
                    background:rgba(255,255,255,.1);
                    a{
                        color:#fff;
                    }

                }
                a{
                    display:inline-block;
                    width:100%;
                    height:100%;
                    color:rgba(255,255,255,.7);
                    padding:0 24px;
                    &:hover{
                        color:#fff;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
   
  .isMobile{
    .main-container{
      .top{
          .logo{
              font-size: 18px;
              padding-left:0px;
              opacity: 0;
              width:0;
          }
          .menu{
              float:left;
              padding-right:5px;
               ul{
                    a{
                        padding:0 20px!important;
                    }
                }
          }
         
      }
    }
  }
  
} 
</style>
